<template>
  <div class="coupons-container">
    <van-nav-bar title="我的优惠券" left-text="返回" left-arrow @click-left="onClickLeft" />

    <!-- 切换优惠券类别的按钮 -->
    <div class="coupon-buttons">
      <button @click="setActive(0)" :class="{ active: active === 0 }">可使用</button>
      <button @click="setActive(3)" :class="{ active: active === 3 }">已使用</button>
      <button @click="setActive(2)" :class="{ active: active === 2 }">已过期</button>
    </div>

    <!-- 显示不同类别的优惠券列表 -->
    <div v-if="active === 0" class="favorites-list">
      <div v-for="(item, index) in availableCoupons" :key="index" class="favorite-item">
        <div class="favorite-info">
          <h3>{{ item.name }}</h3>
          <span>优惠卷来源（类型）:</span>
          <div style="color: #1E88E5">{{ item.type }}</div>
          <span>有效期至</span>
          {{ item.period }}
          <div class="coupon-point">
            使用积分: {{ item.point }}积分
          </div>
        </div>
        <button @click="removeFavorite(index)" class="remove-btn">
          <span class="material-icons">消费条件:</span>
          {{ item.condition }}
        </button>
      </div>
    </div>

    <div v-if="active === 3" class="favorites-list">
      <div v-for="(item, index) in usedCoupons" :key="index" class="favorite-item">
        <div class="favorite-info">
          <h3>{{ item.name }}</h3>
          <span>优惠卷来源（类型）:</span>
          <div style="color: #1E88E5">{{ item.type }}</div>
          <span>有效期至</span>
          {{ item.period }}
          <div class="coupon-point">
            使用积分: {{ item.point }}积分
          </div>
        </div>
      </div>
    </div>

    <div v-if="active === 2" class="favorites-list">
      <div v-for="(item, index) in expiredCoupons" :key="index" class="favorite-item">
        <div class="favorite-info">
          <h3>{{ item.name }}</h3>
          <span>优惠卷来源（类型）:</span>
          <div style="color: #1E88E5">{{ item.type }}</div>
          <span>有效期至</span>
          {{ item.period }}
          <div class="coupon-point">
            使用积分: {{ item.point }}积分
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { GetUserInfo } from "@/api/user";
import { GetStationListwd } from "@/api/station";
import router from '@/router';

// 定义响应式变量
const availableCoupons = ref([]);  // 存储可使用的优惠券
const usedCoupons = ref([]);       // 存储已使用的优惠券
const expiredCoupons = ref([]);    // 存储已过期的优惠券
const active = ref(0);             // 当前选中的标签（0 表示可使用，3 表示已使用，2 表示已过期）
const userId = ref(null);          // 当前登录用户的 ID

// 获取站点信息和优惠券信息
function getStationInfo() {
  if (!userId.value) {
    console.error('用户 ID 未获取');
    return;
  }

  GetStationListwd({ userId: String(userId.value) })  // 将 userId 转换为字符串
      .then(res => {
        console.log('API 响应数据:', res);
        if (res.data.code === 200000) {
          const coupons = res.data.data;
          // 根据 status 分类优惠券
          availableCoupons.value = coupons.filter(item => item.status === 1);  // 可使用
          usedCoupons.value = coupons.filter(item => item.status === 2);       // 已使用
          expiredCoupons.value = coupons.filter(item => item.status === 0);    // 已过期
          console.log('获取到的优惠券列表:', coupons);
        } else {
          console.error('获取优惠券列表失败:', res.data.message);
        }
      })
      .catch(err => {
        console.error('获取优惠券列表出错:', err);
      });
}

// 获取用户信息
function getUserInfo() {
  GetUserInfo().then((res) => {
    if (res.data.code === 200000) {
      userId.value = res.data.data.id;
      console.log("登录用户 ID:", userId.value);
      getStationInfo();  // 获取站点信息
    } else {
      console.error('获取用户信息失败:', res.data.message);
    }
  }).catch((err) => {
    console.error("获取用户信息出错:", err);
  });
}

// 点击左侧返回按钮
function onClickLeft() {
  router.push("/mine/index");
}

// 点击按钮切换当前选择的优惠券类别
function setActive(category) {
  active.value = category;
}

// 在组件挂载时调用 getUserInfo
onMounted(() => {
  getUserInfo();
});

// 点击移除按钮时的处理方法，执行跳转
function removeFavorite(index) {
  console.log(`移除优惠券: ${index}`);
  router.push("/user/login");  // 例如：跳转到登录页
}
</script>

<style scoped>
/* 页面整体布局 */
.coupons-container {
  padding: 20px;
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 切换优惠券类别按钮 */
.coupon-buttons {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.coupon-buttons button {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}

.coupon-buttons button.active {
  background-color: #1E88E5;
  color: white;
  border-color: #1E88E5;
}

.coupon-buttons button:hover {
  background-color: #e0e0e0;
}

/* 每张优惠券的卡片样式 */
.favorite-item {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

/* 按钮样式 */
.remove-btn {
  background-color: #FF6347;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.remove-btn:hover {
  background-color: #e53e3e;
}
</style>
